<template>
  <el-dialog :visible.sync="visible" :title="msgType" @close="handleClose" :close-on-click-modal=false
             custom-class="custom-notify-dialog" :modal="false" :close-on-press-escape="true"
             width="350px"
             top="16px">
    <el-form size="mini" label-width="100px" :model="msgObj" title="msgObj.title">
      <el-form-item label="开始时间">
        <span>{{ msgObj.remindTime }}</span>
      </el-form-item>
      <el-form-item label="主持人" v-if="msgType==='会议通知'">
        <span>{{ msgObj.summary }}</span>
      </el-form-item>
      <el-form-item label="发布人" v-if="msgType==='任务通知'">
        <span>{{ host }}</span>
      </el-form-item>
      <el-form-item label="信息发送人">
        <span>{{ msgObj.sender }}</span>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="mini" type="warning">关闭</el-button>
      <el-button @click="handleConfirm" size="mini" type="success">确认</el-button>
      <el-button v-if="showDetailBtn" type="primary" @click="viewDetail" size="mini">查看</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      msgObj: {},
      showDetailBtn: false,
      relateId: null,
      msgType: '',
    }
  },
  methods: {
    showDialog(msgObj) {
      this.msgType = msgObj.type
      this.relateId = msgObj.relateId
      this.msgObj = msgObj
      this.showDetailBtn = true
      this.visible = true
      console.log('弹窗visible:', this.visible, 'msgObj:', this.msgObj)
    },
    handleClose() {
      this.visible = false;
    },
    handleConfirm(){
      console.log(this.msgObj.id)
      this.$emit('read',this.msgObj.id)
      this.visible = false;
    },
    viewDetail() {
      // 根据类型跳转不同页面
      if (this.msgType === '会议通知') {
        this.$router.push({name: 'MeetingDetail', query: {meetingId: this.relateId}});
      } else if (this.msgType === '任务通知') {
        this.$router.push({name: 'TodoTask', query: {taskId: this.relateId}});
      }
      this.handleClose();
    }
  }
}
</script>

<style scoped>
::v-deep .custom-notify-dialog {
  position: fixed !important;
  right: 16px !important;
  top: 16px !important;
  margin: 0 !important;
  padding: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  min-width: 300px;
  max-width: 400px;
  background: #fff;
  animation: notify-fade-in 0.3s;
}
::v-deep .el-dialog__wrapper{
  z-index: 1 !important;
}
::v-deep .el-form-item__label{
  color:#1989FA !important;
  font-size: 13px;
}
::v-deep .el-form span{
  color: #545454 !important;
  font-size: 13px;
}
/* 动画效果 */
@keyframes notify-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>